<!--订单信息-->
<template>
  <div class="orderInfomation">
    <div>
      <div class="orderList">
        <div v-for="(item,index) in orderList" class="orderItem" :class="{ 'lastItem': (index + 1) % 4 === 0 }">
          <div class="content">
            <div class="xh">{{index + 1}}</div>
            <h3 class="title">{{item.status}}</h3>
            <div>操作人：{{item.operator_name}}</div>
            <div>时间：{{item.created_at}}</div>
          </div>
          <div class="icon">
            <img src="/src/assets/rightBottom.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="left">
      <el-form-item label="订单编号:">
        <el-text>{{formInline.orders_sn}}</el-text>
      </el-form-item>
      <el-form-item label="订单创建时间:">
        <el-text>{{formInline.created_at}}</el-text>
      </el-form-item>
      <el-form-item label="首次支付时间:">
        <el-text>{{formInline.payment_at}}</el-text>
      </el-form-item>
      <el-form-item label="关联咨询单:" class="itemCol">
        <el-text>{{formInline.ref_code}}</el-text>
      </el-form-item>
      <el-form-item label="关联收款单:" class="itemCol">
        <el-text>{{formInline.payment_order_code}}</el-text>
      </el-form-item>
      <el-form-item label="关联退款单:" class="itemCol">
        <el-text style="margin-right: 6px;" v-for="(item,index) in formInline.refund_order_code" :key="index">{{item}}</el-text>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import {ref,nextTick,onMounted,reactive} from 'vue'
  import {orderNode,orderPatient} from '/src/api/orderManage/recipeOrder'
  const props = defineProps({
    prescriptionOrderId: { type: String }
  })
  const formInline = ref({})
  const orderList = ref([])
  
  /*订单列表*/
  const getOrderNode = async () => {
    try {
      console.log(props.prescriptionOrderId)
      const result = await orderNode({id:props.prescriptionOrderId})
      console.log('订单', result)
      if (result.code == 200) {
        console.log('订单',result.data)
        orderList.value=result.data
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  //订单信息
  const getOrderPatient = async () => {
    try {
      console.log(props.prescriptionOrderId)
      const result = await orderPatient({id:props.prescriptionOrderId})
      console.log('订单', result)
      if (result.code == 200) {
        console.log('订单',result.data)
        formInline.value=result.data
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  
  onMounted(() => {
    getOrderNode()
    getOrderPatient()
  });
</script>

<style lang="scss" scoped>
  .orderList {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    background: #FAFAFA;
    border-radius: 4px;
    padding: 20px 10px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .orderItem {
    max-width: 25%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

  }

  .orderItem:nth-child(4n + 1) {
    margin-left: 0;
    /* 每行第一个项目不添加左边距 */
  }

  .content {
    width: 100%;
    border: 1px solid #64B4FF;
    border-radius: 4px;
    padding: 15px 30px;
    font-size: 12px;
    background: #EAF5FF;
    color: rgba(0, 0, 0, 0.65);
    position: relative;
    font-family: PingFangSC-Regular;
    min-height: 180px;
    margin: 0 20px 0 40px;
    min-height: 120px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 16px;
    }

    .xh {
      position: absolute;
      width: 26px;
      height: 26px;
      left: 0;
      top: 0;
      color: #fff;
      font-size: 12px;
      background: #028FFF;
      line-height: 24px;
      text-align: center;
      border-radius: 0 0 70% 0;
    }
  }

  .orderItem:last-child .content {
    background: #fcf4f4;
    border: 1px solid #fa5757;

    .xh {
      background: #fa5757;
    }
  }

  .orderItem:last-child img {
    // display: none;
    visibility: hidden;
  }

  .icon {
    flex-shrink: 0;
    // margin-left: 10px;
    /* 不允许图片缩小，保持原始大小 */
  }

  .icon img {
    width: 20px;
    height: 20px;
    // margin: 0 10px;
  }

  /* 每行的最后一个订单项不显示图片 */
  .lastItem .icon {
    // display: none;
    visibility: hidden;
  }

  .demo-form-inline {
    width: 100%;
    margin-top: 20px;
  }

  .demo-form-inline ::v-deep .el-form-item {
    width: 33.33%;
    margin-right: 0px !important;
    margin-bottom: 0 !important;
      font-weight: 300;
  }

  ::v-deep .el-form-item__label {
    color: rgba(0, 0, 0, .85)
  }

  .itemCol {
    width: 100% !important;
  }
</style>